<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>爱国情感分析系统</title>
    <link rel="stylesheet" href="/static/css/layui.css">
    <script src="/static/jquery-3.6.0.min.js"></script>
    <script src="/static/layui.js"></script>
    <style>
        body {
            background-color: #f5f5f5;
            font-family: 'Microsoft YaHei', sans-serif;
        }

        .patriotic-container {
            padding: 20px;
            min-height: 100vh;
        }

        .analysis-card {
            margin-bottom: 20px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, .12);
            border-radius: 2px;
        }

        .feature-card:hover {
            transform: translateY(-2px);
            transition: all 0.3s ease;
            box-shadow: 0 4px 8px rgba(0, 0, 0, .15);
        }

        .timeline-content {
            background: #fff;
            padding: 15px;
            border-radius: 5px;
            border-left: 3px solid #1E9FFF;
        }
    </style>
</head>

<body>
    <div class="patriotic-container">
        <div class="layui-container" style="padding: 20px;">
            <div class="layui-row">
                <div class="layui-col-md12">
                    <div class="layui-card">
                        <div class="layui-card-header">
                            <h2><i class="layui-icon layui-icon-heart" style="color: #FF5722;"></i> 爱国情感分析系统</h2>
                            <p>基于先进AI技术的智能爱国情感分析平台</p>
                        </div>
                        <div class="layui-card-body">
                            <!-- 快速操作区域 -->
                            <div class="layui-row">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-header">
                                            <h3><i class="layui-icon layui-icon-list"></i> 快速操作</h3>
                                        </div>
                                        <div class="layui-card-body">
                                            <div class="layui-row">
                                                <div class="layui-col-md4">
                                                    <button
                                                        class="layui-btn layui-btn-fluid layui-btn-lg layui-btn-normal"
                                                        onclick="goToBatchAnalyze()">
                                                        <i class="layui-icon layui-icon-list"></i> 批量分析作业
                                                    </button>
                                                    <p style="text-align: center; margin-top: 10px; color: #666;">
                                                        批量分析学生作业中的爱国情感
                                                    </p>
                                                </div>
                                                <div class="layui-col-md4">
                                                    <button
                                                        class="layui-btn layui-btn-fluid layui-btn-lg layui-btn-warm"
                                                        onclick="goToSingleAnalyze()">
                                                        <i class="layui-icon layui-icon-edit"></i> 单个文本分析
                                                    </button>
                                                    <p style="text-align: center; margin-top: 10px; color: #666;">
                                                        快速分析单个文本的爱国情感
                                                    </p>
                                                </div>
                                                <div class="layui-col-md4">
                                                    <button
                                                        class="layui-btn layui-btn-fluid layui-btn-lg layui-btn-danger"
                                                        onclick="viewPromptTemplates()">
                                                        <i class="layui-icon layui-icon-template-1"></i> 查看分析模式
                                                    </button>
                                                    <p style="text-align: center; margin-top: 10px; color: #666;">
                                                        了解四种分析模式的特点
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 系统功能简介 -->
                            <div class="layui-row" style="margin-top: 20px;">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-header">
                                            <h3><i class="layui-icon layui-icon-set"></i> 系统功能</h3>
                                        </div>
                                        <div class="layui-card-body">
                                            <div class="layui-row">
                                                <div class="layui-col-md3">
                                                    <div class="layui-card">
                                                        <div class="layui-card-body" style="text-align: center;">
                                                            <i class="layui-icon layui-icon-search"
                                                                style="font-size: 36px; color: #1E9FFF;"></i>
                                                            <h4>标准分析</h4>
                                                            <p style="color: #666; font-size: 12px;">基础爱国情感分析，快速准确</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="layui-col-md3">
                                                    <div class="layui-card">
                                                        <div class="layui-card-body" style="text-align: center;">
                                                            <i class="layui-icon layui-icon-edit"
                                                                style="font-size: 36px; color: #5FB878;"></i>
                                                            <h4>详细分析</h4>
                                                            <p style="color: #666; font-size: 12px;">五维度深入分析，全面评估</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="layui-col-md3">
                                                    <div class="layui-card">
                                                        <div class="layui-card-body" style="text-align: center;">
                                                            <i class="layui-icon layui-icon-education"
                                                                style="font-size: 36px; color: #FFB800;"></i>
                                                            <h4>教育导向</h4>
                                                            <p style="color: #666; font-size: 12px;">教育角度分析，提供指导建议</p>
                                                        </div>
                                                    </div>
                                                </div>
                                                <div class="layui-col-md3">
                                                    <div class="layui-card">
                                                        <div class="layui-card-body" style="text-align: center;">
                                                            <i class="layui-icon layui-icon-chart"
                                                                style="font-size: 36px; color: #FF5722;"></i>
                                                            <h4>综合分析</h4>
                                                            <p style="color: #666; font-size: 12px;">最全面的分析模式，多角度评估</p>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>

                            <!-- 使用说明 -->
                            <div class="layui-row" style="margin-top: 20px;">
                                <div class="layui-col-md12">
                                    <div class="layui-card">
                                        <div class="layui-card-header">
                                            <h3><i class="layui-icon layui-icon-help"></i> 使用说明</h3>
                                        </div>
                                        <div class="layui-card-body">
                                            <div class="layui-timeline">
                                                <div class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">选择分析方式</h3>
                                                        <p>根据需求选择批量分析或单个文本分析</p>
                                                    </div>
                                                </div>
                                                <div class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">选择分析模式</h3>
                                                        <p>从标准、详细、教育导向、综合分析四种模式中选择</p>
                                                    </div>
                                                </div>
                                                <div class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">获取分析结果</h3>
                                                        <p>查看详细的爱国情感分析报告和评分</p>
                                                    </div>
                                                </div>
                                                <div class="layui-timeline-item">
                                                    <i class="layui-icon layui-timeline-axis">&#xe63f;</i>
                                                    <div class="layui-timeline-content layui-text">
                                                        <h3 class="layui-timeline-title">导出结果</h3>
                                                        <p>支持将分析结果导出为Excel文件</p>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script>
            layui.use(['element', 'layer'], function () {
                var element = layui.element;
                var layer = layui.layer;

                // 跳转到批量分析页面
                window.goToBatchAnalyze = function () {
                    // 使用父窗口的导航系统
                    if (parent && parent.document) {
                        var navItem = parent.document.querySelector('[data-url="/patriotic_prompt/batch_analyze"]');
                        if (navItem) {
                            navItem.click();
                        } else {
                            // 如果没有找到导航项，直接跳转
                            parent.location.href = '/patriotic_prompt/batch_analyze';
                        }
                    } else {
                        window.location.href = '/patriotic_prompt/batch_analyze';
                    }
                };

                // 跳转到单个文本分析
                window.goToSingleAnalyze = function () {
                    layer.open({
                        type: 1,
                        title: '单个文本分析',
                        area: ['800px', '600px'],
                        content: `
                    <div style="padding: 20px;">
                        <div class="layui-form">
                            <div class="layui-form-item">
                                <label class="layui-form-label">分析模式：</label>
                                <div class="layui-input-block">
                                    <select id="promptType" lay-verify="required">
                                        <option value="standard">标准分析</option>
                                        <option value="detailed">详细分析</option>
                                        <option value="educational">教育导向</option>
                                        <option value="comprehensive">综合分析</option>
                                    </select>
                                </div>
                            </div>
                            <div class="layui-form-item layui-form-text">
                                <label class="layui-form-label">文本内容：</label>
                                <div class="layui-input-block">
                                    <textarea id="analyzeText" placeholder="请输入要分析的文本内容..." style="height: 300px;"></textarea>
                                </div>
                            </div>
                            <div class="layui-form-item">
                                <div class="layui-input-block">
                                    <button class="layui-btn" onclick="analyzeText()">开始分析</button>
                                    <button type="button" class="layui-btn layui-btn-primary" onclick="layer.closeAll()">取消</button>
                                </div>
                            </div>
                        </div>
                        <div id="analyzeResult" style="display: none; margin-top: 20px;">
                            <h4>分析结果：</h4>
                            <div id="resultContent"></div>
                        </div>
                    </div>
                `,
                        success: function () {
                            layui.form.render();
                        }
                    });
                };

                // 查看分析模式
                window.viewPromptTemplates = function () {
                    layer.open({
                        type: 1,
                        title: '分析模式说明',
                        area: ['900px', '700px'],
                        content: `
                    <div style="padding: 20px;">
                        <div class="layui-tab layui-tab-brief" lay-filter="analysisModes">
                            <ul class="layui-tab-title">
                                <li class="layui-this" lay-id="standard">标准分析</li>
                                <li lay-id="detailed">详细分析</li>
                                <li lay-id="educational">教育导向</li>
                                <li lay-id="comprehensive">综合分析</li>
                            </ul>
                            <div class="layui-tab-content">
                                <div class="layui-tab-item layui-show">
                                    <h4>标准分析模式</h4>
                                    <p>提供基础的爱国情感分析，包括：</p>
                                    <ul>
                                        <li>爱国情感得分（0-1）</li>
                                        <li>爱国情感等级分类</li>
                                        <li>爱国词汇统计</li>
                                        <li>分析置信度</li>
                                        <li>简要分析说明</li>
                                    </ul>
                                    <p><strong>适用场景：</strong>快速批量分析，日常作业评估</p>
                                </div>
                                <div class="layui-tab-item">
                                    <h4>详细分析模式</h4>
                                    <p>从五个维度深入分析爱国情感：</p>
                                    <ul>
                                        <li>国家认同感：对祖国的认同和归属感</li>
                                        <li>民族自豪感：对中华民族的自豪和骄傲</li>
                                        <li>文化认同：对中华文化的认同和传承</li>
                                        <li>历史认知：对祖国历史的正确认知</li>
                                        <li>价值观念：体现的社会主义核心价值观</li>
                                    </ul>
                                    <p><strong>适用场景：</strong>深度分析，详细评估报告</p>
                                </div>
                                <div class="layui-tab-item">
                                    <h4>教育导向模式</h4>
                                    <p>从教育角度分析，重点关注：</p>
                                    <ul>
                                        <li>学生的爱国情感表达是否积极正面</li>
                                        <li>是否体现正确的国家观、历史观、民族观、文化观</li>
                                        <li>是否具有正确的价值导向</li>
                                        <li>爱国情感的表达方式和深度</li>
                                        <li>教育建议和改进方向</li>
                                    </ul>
                                    <p><strong>适用场景：</strong>教学指导，学生培养</p>
                                </div>
                                <div class="layui-tab-item">
                                    <h4>综合分析模式</h4>
                                    <p>最全面的分析模式，包含：</p>
                                    <ul>
                                        <li>情感表达：爱国情感的表达强度和方式</li>
                                        <li>内容分析：文本内容体现的爱国元素</li>
                                        <li>语言特征：使用的爱国相关词汇和表达</li>
                                        <li>价值判断：体现的价值观念和立场</li>
                                        <li>教育意义：对学生的教育价值和意义</li>
                                        <li>改进空间：可以进一步提升的地方</li>
                                    </ul>
                                    <p><strong>适用场景：</strong>全面评估，研究报告</p>
                                </div>
                            </div>
                        </div>
                    </div>
                `,
                        success: function () {
                            layui.element.render();
                        }
                    });
                };

                // 分析文本
                window.analyzeText = function () {
                    var text = $('#analyzeText').val();
                    var promptType = $('#promptType').val();

                    if (!text.trim()) {
                        layer.msg('请输入要分析的文本内容', { icon: 2 });
                        return;
                    }

                    layer.msg('正在分析中...', { icon: 16, time: 0 });

                    $.ajax({
                        url: '/patriotic_prompt/api/analyze_single',
                        type: 'POST',
                        contentType: 'application/json',
                        data: JSON.stringify({
                            text: text,
                            prompt_type: promptType
                        }),
                        success: function (res) {
                            layer.closeAll();
                            if (res.success) {
                                showAnalyzeResult(res.result);
                            } else {
                                layer.msg(res.error || '分析失败', { icon: 2 });
                            }
                        },
                        error: function () {
                            layer.closeAll();
                            layer.msg('网络错误，请重试', { icon: 2 });
                        }
                    });
                };

                // 显示分析结果
                function showAnalyzeResult(result) {
                    var html = `
                <div class="layui-card">
                    <div class="layui-card-header">
                        <h4>分析结果</h4>
                    </div>
                    <div class="layui-card-body">
                        <div class="layui-row">
                            <div class="layui-col-md6">
                                <p><strong>爱国情感得分：</strong>${(result.patriotic_score * 100).toFixed(1)}%</p>
                                <p><strong>爱国情感等级：</strong>${result.patriotic_level}</p>
                                <p><strong>是否具有爱国情感：</strong>${result.is_patriotic ? '是' : '否'}</p>
                                <p><strong>分析置信度：</strong>${(result.confidence * 100).toFixed(1)}%</p>
                            </div>
                            <div class="layui-col-md6">
                                <p><strong>爱国词汇数量：</strong>${result.patriotic_words_count}</p>
                                <p><strong>反爱国词汇数量：</strong>${result.anti_patriotic_words_count}</p>
                                <p><strong>分析模式：</strong>${result.prompt_type}</p>
                                <p><strong>模型类型：</strong>${result.model_type}</p>
                            </div>
                        </div>
                        <div class="layui-form-item layui-form-text">
                            <label class="layui-form-label">详细分析：</label>
                            <div class="layui-input-block">
                                <textarea readonly style="height: 100px;">${result.patriotic_breakdown}</textarea>
                            </div>
                        </div>
                    </div>
                </div>
            `;

                    $('#resultContent').html(html);
                    $('#analyzeResult').show();
                }
            });
        </script>
    </div>
</body>

</html>